<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box1{
      height: 100px;
      width: 100px;
      background-color: red;
      position: absolute;
    }
  </style>
      <script type="text/javascript">
      window.onload = function () {
        var button = document.getElementById('button')
        var box1 = document.getElementById('box1')
        var timer = null
        //点击按钮以后，使box1向右移动（left值增大）
        button.onclick = function () {
          // 防止速度越来越快，每次结束之后都要清除定时器
          clearInterval(timer)

          timer = setInterval(function() {
            var left = parseInt(getStyle(box1,'left'))
            var newLeft = left+1;
            if (newLeft>=800) {
              newLeft = 800
            }
            box1.style.left = newLeft + 'px'
            if (newLeft ==800) {
              clearInterval(timer)
            }
            
          },30)
        }
      }
      	/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
      function getStyle (obj,name) {
        if (window.getComputedStyle) {
          return getComputedStyle(obj,null)[name]
        } else {
          return obj.currentStyle[name]
        }
      }
      </script>
</head>
<body>
  <button id="button">开启定时器之后box1向右移动</button>
  <div id="box1"></div>
</body>
</html>